<template>
  <div class="layout" style="overflow: hidden;">
    <Layout>

      <Header>
        <Menu mode="horizontal" theme="light" active-name="1" @on-select='getBtnList'>
          <div class="layout-logo">
            <img src="../assets/images/logo3.png" alt="" class="logo3_class">正睿智库
          </div>
          <div style="height: 20px;line-height: 20px;text-align: right;margin-top: 10px">
            <p style="display: inline-block;    padding-left: 13px;color: #ed4014;font-size: 20px;float: left">
              欢迎 {{CD_.user_Data.username}} 登录正睿智库——企业管理的百宝箱，您的问题都有答案
            </p>
            <p style="display: inline-block;    padding-right: 20px;color: #999999;font-size: 15px">客服电话 400-990-0880</p>
          </div>
          <div class="layout-nav">
            <Submenu v-if="item.is_children == 'y'" v-for="(item, index) in MuenV2Data" :key="item.item_name+item.id"
                     :name="item.id">
              <template slot="title">
                <Icon :type="item.icon"></Icon>
                {{item.item_name}}
              </template>

              <MenuGroup v-if="left_item.is_children == 'y'" v-for="(left_item, left_index) in item.children" :key="left_item.item_name+left_item.id"
                       :name="left_item.id" :title="left_item.item_name">
                <MenuItem v-for="(c_item, c_index) in left_item.children" :key="c_item.item_name+c_item.id" :name="c_item.id"
                          :to="c_item.to">{{c_item.item_name}}
                </MenuItem>
              </MenuGroup>

              <MenuItem v-else :key="left_item.item_name" :name="left_item.id" :to="left_item.to">
                {{left_item.item_name}}
              </MenuItem>
            </Submenu>

            <MenuItem v-else :key="item.item_name" :name="item.id" :to="item.to">
              <Icon :type="item.icon"></Icon>
              {{item.item_name}}
            </MenuItem>

            <!--<MenuItem :name="100" to="/menu">
              菜单管理
            </MenuItem>-->
          </div>
        </Menu>

        <div class="right_nav">
          <!--<p style="display: inline-block;    padding-right: 20px;color: #999999">
            欢迎 {{CD_.user_Data.username}} 登录正睿智库&nbsp;&nbsp;|&nbsp;&nbsp;
            客服电话 400-990-0880
          </p>-->
          <div  style="display: inline-block;margin-right: 10px">
            <Button type="dashed" @click="comments_model = true" style="    background: transparent;">
              留言板
            </Button>
          </div>
          <div  style="display: inline-block;margin-right: 10px">
            <div v-if="fullscreen">
              <Button type="dashed" @click="handleFullScreen" style="    background: transparent;">
                <!--<Icon type="md-contract"/>-->
                恢复
              </Button>

            </div>
            <div v-else>
              <Button type="dashed" @click="handleFullScreen" style="    background: transparent;" >
                <!--<Icon type="md-expand"/>-->
                全屏
              </Button>
              <!--<img v-show="qp_img_show" src="../assets/images/qp.png" alt="" class="qp_img">-->
            </div>
          </div>
          <Dropdown style="height: 65px;padding-top: 8px" placement="bottom-end">
            <a href="javascript:void(0)" style="color: #A6DBFF">
              <img src="../assets/images/user_img.jpg" alt="" style="width: 50px">
            </a>
            <DropdownMenu slot="list">
              <DropdownItem><span @click="user_model = true">个人信息</span></DropdownItem>
              <DropdownItem divided ><router-link to="/login">退出登录</router-link></DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>
      </Header>
      <Content :style="{padding: '10px'}">
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive">
            <!-- 这里是会被缓存的视图组件，比如 Home！ -->
          </router-view>
        </keep-alive>

        <router-view v-if="!$route.meta.keepAlive"></router-view>
      </Content>
    </Layout>




    <!--留言板-->
    <Drawer :closable="false" width="640" v-model="comments_model">
      <p :style="pStyle">留言板</p>

      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="联系人" prop="user_name">
          <Input v-model="formValidate.user_name" placeholder="联系人姓名"></Input>
        </FormItem>
        <FormItem label="联系方式" prop="user_mobile">
          <Input v-model="formValidate.user_mobile" placeholder="联系电话|手机号|邮箱"></Input>
        </FormItem>
        <FormItem label="需求资料" prop="text_comments">
          <Input v-model="formValidate.text_comments" type="textarea" :autosize="{minRows: 5,maxRows: 5}" placeholder="请说明所需资料内容"></Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="commentsSubmit('formValidate')">提交</Button>
          <Button @click="comments_model = false" style="margin-left: 8px">取消</Button>
        </FormItem>
      </Form>
    </Drawer>

    <!--个人信息-->
    <Drawer :closable="false" width="640" v-model="user_model">
      <p :style="pStyle">身份信息</p>

      <Row  class="account-info">
        <i-col class="manage-contents" span="24">
          <h4>账户信息</h4>
          <div class="user-contents">
            <Row>
              <Col span="12">
              <span class="text_tile">用户名称:</span> {{user_Data.username}}
              </Col>
              <Col span="12">
              <span class="text_tile">登录名:</span> {{user_Data.loginname}}
              </Col>
            </Row>
          </div>
          <div class="user-contents">
            <Row>
              <i-col span="24">
                <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">
                  <FormItem label="新密码" prop="passwd">
                    <Input type="password" v-model="formCustom.passwd"></Input>
                  </FormItem>
                  <FormItem label="确认密码" prop="passwdCheck">
                    <Input type="password" v-model="formCustom.passwdCheck"></Input>
                  </FormItem>
                  <FormItem>
                    <Button type="primary" @click="handleSubmit('formCustom')">确认修改</Button>
                  </FormItem>
                </Form>
              </i-col>
            </Row>
          </div>
          <div class="user-contents">
            <Row>
              <i-col span="4">
                <span>注册日期</span>
              </i-col>
              <i-col span="20">
                <span>{{ user_Data.date }}</span>
              </i-col>
            </Row>
          </div>

        </i-col>
        <i-col class="manage-contents" span="24">
          <h4>其他信息</h4>
          <div class="user-contents">
            <Row>
              <Col span="12">
              <span class="text_tile">所属角色:</span> {{user_Data.role}}
              </Col>
            </Row>
          </div>
          <div class="user-contents">
            <Row>
              <Col span="12">
              <span class="text_tile">所属项目:</span> {{user_Data.department}}
              </Col>
              <Col span="12">
              <span class="text_tile">设备码:</span> {{user_Data.eq_code}}
              </Col>
            </Row>
          </div>
          <div class="user-contents">
            <Row>
              <Col span="12">
              <span class="text_tile">手机号码:</span> {{user_Data.mobile}}
              </Col>
              <Col span="12">
              <span class="text_tile">邮箱:</span> {{user_Data.email}}
              </Col>
            </Row>
          </div>
        </i-col>
      </Row>
    </Drawer>

  </div>

</template>
npm
<script>
  export default {
    name: 'Main',
    data() {
      const validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入你的新密码'));
        } else {
          if (this.formCustom.passwdCheck !== '') {
            // 对第二个密码框单独验证
            this.$refs.formCustom.validateField('passwdCheck');
          }
          callback();
        }
      };
      const validatePassCheck = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入你的确认密码'));
        } else if (value !== this.formCustom.passwd) {
          callback(new Error('两次输入不一致!'));
        } else {
          callback();
        }
      };
      return {
        isCollapsed: false,
        user_Data: {username: ''},
        MuenV2Data: [],
        topMuenData: [],
        leftMenu_data: [],
        user_model: false,
        comments_model: false,
        show_form: false,
        always_true: true,
        qp_img_show:true ,
        pStyle: {
          fontSize: '16px',
          color: 'rgba(0,0,0,0.85)',
          lineHeight: '24px',
          display: 'block',
          marginBottom: '16px'
        },
        fullscreen: false,//控制全屏
        top_div_show: false,//顶部内容
        formCustom: {
          passwd: '',
          passwdCheck: ''
        },
        ruleCustom: {
          passwd: [
            {validator: validatePass, trigger: 'blur'},
            {type: 'string', min: 6, message: '密码长度最小为6', trigger: 'blur'}
          ],
          passwdCheck: [
            {validator: validatePassCheck, trigger: 'blur'},
            {type: 'string', min: 6, message: '密码长度最小为6', trigger: 'blur'}
          ]
        },
        formValidate: {
          user_name: '',
          user_mobile: '',
          text_comments: ''
        },
        ruleValidate: {
          user_name: [
            { required: true, message: '请填写联系人姓名', trigger: 'blur' }
          ],
          user_mobile: [
            { required: true, message: '请填写联系方式', trigger: 'blur' }
          ],
          text_comments: [
            { required: true, message: '请详细说明您的资料需求', trigger: 'blur' }
          ]
        }
      }
    },
    computed: {
      rotateIcon () {
        return [
          'menu-icon',
          this.isCollapsed ? 'rotate-icon' : ''
        ];
      },
      menuitemClasses () {
        return [
          'menu-item',
          this.isCollapsed ? 'collapsed-menu' : ''
        ]
      }
    },
    methods: {
      collapsedSider () {
        this.$refs.side1.toggleCollapse();
      },

      commentsSubmit (name) {
        /*======================================================
        *@author wf_Huang
        *@Time 2019/1/22 9:19
        *=======================================================
        *@function  提交留言
        *=====================================================*/
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$http({
              method: 'post',
              url: this.CD_.qj_url + 'index/comments/setComments',
              data: {
                user_name: this.formValidate.user_name,
                user_mobile: this.formValidate.user_mobile,
                text_comments: this.formValidate.text_comments,
              }
            }).then(function (res) {
              var json = res.data;
              if (json.status) {
                this.$Message.success('提交成功，工作人员将尽快的联系您。');

                this.comments_model = false ;
                this.formValidate.text_comments = '' ;
              } else {
                this.$Message.error('留言失败，请联系客服中心');
              }


            }.bind(this)).catch(function (err) {
              this.$Notice.error({title: '操作失败', desc: '错误：' + err});
            }.bind(this))
          } else {
            this.$Message.error('请填写完善的信息');
          }
        })
      },
      handleSubmit(name) {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/11/3 11:59
        *=======================================================
        *@function  修改密码
        *=====================================================*/
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$http({
              method: 'post',
              url: this.CD_.qj_url + 'index/user/setPassword',
              data: {
                id: this.user_Data.id,
                passwd: this.formCustom.passwd,
              }
            }).then(function (res) {
              var json = res.data;
              if (json.status) {
                this.$Message.success('密码信息成功，请重新登录！');
                this.$router.push('/login');
              } else {
                this.$Message.error('密码修改失败，请重试！');
              }


            }.bind(this)).catch(function (err) {
              this.$Notice.error({title: '操作失败', desc: '错误：' + err});
            }.bind(this))
          } else {
            this.$Message.error('密码信息有误，请检查！');
          }
        })
      },
      handleFullScreen() {
        //全屏
        let element = document.documentElement;
        if (this.fullscreen) {
          this.top_div_show = false ;
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
        } else {
          this.top_div_show = true ;
          this.qp_img_show = false ;
          if (element.requestFullscreen) {
            element.requestFullscreen();
          } else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen();
          } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
          } else if (element.msRequestFullscreen) {
            // IE11
            element.msRequestFullscreen();
          }
        }
        this.fullscreen = !this.fullscreen;
      },
      getBtnList(id) {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/10/16 21:36
        *=======================================================
        *@function  获取页面按钮
        *=====================================================*/
        this.$http({
          method: 'post',
          url: this.CD_.qj_url + 'index/Menu/getBtnList',
          data: {
            menu_id: id,
            user_id: this.user_Data.id
          }
        }).then(function (res) {
          var json = res.data;

          if (json.status) {
            if (json.btn_list.indexOf('add') !== -1) {
              this.CD_.btn_List.add_btn = true
            } else {
              this.CD_.btn_List.add_btn = false
            }
            if (json.btn_list.indexOf('remove') !== -1) {
              this.CD_.btn_List.remove_btn = true
            } else {
              this.CD_.btn_List.remove_btn = false
            }
            if (json.btn_list.indexOf('edit') !== -1) {
              this.CD_.btn_List.edit_btn = true
            } else {
              this.CD_.btn_List.edit_btn = false
            }
            if (json.btn_list.indexOf('view') !== -1) {
              this.CD_.btn_List.view_btn = true
            } else {
              this.CD_.btn_List.view_btn = false
            }
            if (json.btn_list.indexOf('audit') !== -1) {
              this.CD_.btn_List.audit_btn = true
            } else {
              this.CD_.btn_List.audit_btn = false
            }
            if (json.btn_list.indexOf('password') !== -1) {
              this.CD_.btn_List.password_btn = true
            } else {
              this.CD_.btn_List.password_btn = false
            }
            if (json.btn_list.indexOf('per') !== -1) {
              this.CD_.btn_List.per_btn = true
            } else {
              this.CD_.btn_List.per_btn = false
            }
            if (json.btn_list.indexOf('unaudit') !== -1) {
              this.CD_.btn_List.unaudit_btn = true
            } else {
              this.CD_.btn_List.unaudit_btn = false
            }

          } else {
            this.CD_.btn_List.add_btn = false
            this.CD_.btn_List.remove_btn = false
            this.CD_.btn_List.edit_btn = false
            this.CD_.btn_List.view_btn = false
            this.CD_.btn_List.audit_btn = false
            this.CD_.btn_List.unaudit_btn = false
            this.CD_.btn_List.password_btn = false
            this.CD_.btn_List.per_btn = false
          }

          window.localStorage.setItem('menu_id', JSON.stringify(id));
        }.bind(this)).catch(function (err) {
          this.$Notice.error({title: '操作失败', desc: '错误：' + err});
        }.bind(this))


      },
      topMenu() {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/9/14 13:56
        *=======================================================
        *@function  初始化顶部菜单
        *=====================================================*/
        this.$http({
          method: 'post',
          url: this.CD_.qj_url + 'index/Menu/getMenu',
          data: {
            user_id: this.user_Data.id,
          }
        }).then(function (res) {
          var json = res.data;
          if (json.status) {
            this.topMuenData = json.menu_data;
//            this.openLeftMenu(this.topMuenData[0].id) ;
          } else {
            this.$Loading.error();
          }


        }.bind(this)).catch(function (err) {
          this.$Notice.error({title: '操作失败', desc: '错误：' + err});
        }.bind(this))
      },
      openLeftMenu(id) {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/9/14 14:19
        *=======================================================
        *@function  打开侧边菜单
        *=====================================================*/
        if (id < 1000) {
          this.$http({
            method: 'post',
            url: this.CD_.qj_url + 'index/Menu/getLeftMenu',
            data: {
              id: id,
              user_id: this.user_Data.id,
            }
          }).then(function (res) {
            var json = res.data;
            if (json.status) {
              this.leftMenu_data = json.leftMenu_data;

              window.localStorage.setItem('top_menu_id', JSON.stringify(id));
            } else {
              this.$Loading.error();
            }


          }.bind(this)).catch(function (err) {
            this.$Notice.error({title: '操作失败', desc: '错误：' + err});
          }.bind(this))
        }

      },

      getMenuV2() {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/9/14 13:56
        *=======================================================
        *@function  初始菜单  第二版
        *=====================================================*/
        this.$http({
          method: 'post',
          url: this.CD_.qj_url + 'index/Menu/getMenuV2',
          data: {
            user_id: this.user_Data.id,
          }
        }).then(function (res) {
          var json = res.data;
          if (json.status) {
            this.MuenV2Data = json.menu_data;
            console.log(this.MuenV2Data) ;
          } else {
            this.$Loading.error();
          }

        }.bind(this)).catch(function (err) {
          this.$Notice.error({title: '操作失败', desc: '错误：' + err});
        }.bind(this))
      },
      getFilestate() {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/11/2 15:40
        *=======================================================
        *@function  判断消息推送
        *=====================================================*/
        this.$http({
          method: 'post',
          url: this.CD_.qj_url + 'index/File/getFilestate',
          data: {
            id: this.user_Data.id,
          }
        }).then(function (res) {
          var json = res.data;
          if (json.status) {
            console.log(json.data);

            var _this = this;
            var desc_html = '';
            for (var i = 0; i < json.data.length; i++) {
              desc_html += '您的上传文件<strong>【' + json.data[i].file_name + '】</strong>已经被 ' + json.data[i].audit_name + ' ' + (json.data[i].state === 'Enable' ? '<strong style="color: #19be6b">审核</strong>' : '<strong style="color: #ed4014">反审核</strong>') + '该文件状态已改变，请留意。<br>';
            }

            setTimeout(function () {
              _this.$Notice.success({
                title: '文件审核提示',
                desc: desc_html,
                duration: 0
              });
            }, 3000)


          }
        }.bind(this)).catch(function (err) {
        }.bind(this))

      }
    },
    mounted() {
//      var _this = this ;
//      setTimeout(function () {
//        _this.qp_img_show = false ;
//      },10000)

      this.CD_.user_Data = JSON.parse(window.localStorage.getItem('user_Data'));
      this.user_Data = this.CD_.user_Data;

      this.formValidate.user_name = this.CD_.user_Data.username;
      this.formValidate.user_mobile = this.CD_.user_Data.mobile;


      var menu_id = JSON.parse(window.localStorage.getItem('menu_id'));
      if (menu_id != null) {
        this.getBtnList(menu_id);
      }

      //刷新获取原来选项
      var top_menu_id = JSON.parse(window.localStorage.getItem('top_menu_id'));

      if (top_menu_id != null) {
        this.openLeftMenu(top_menu_id);
      }

      this.getMenuV2();

      //判断一下是否要推送消息
      this.getFilestate();


    }
  }



</script>

<style scoped>
  body{
    background-color: #f5f7f9;
  }

  .right_nav{
    float: right;
    display: inline-flex;
  }
  .ivu-menu-light {
    background: #ffffff;
    display: initial;
  }

  .ivu-dropdown-rel {
    position: relative;
    height: 65px;
  }

  .ivu-layout-header {
    background: #ffffff;
    padding: 0 10px 0 0;
    height: 90px;
    line-height: 64px;
    margin: 20px 0 0;
  }
  .layout-logo {
    position: relative;
    float: left;
    padding-right: 10px;
    padding-left: 85px;
    background-color: #ffffff;
    font-size: 25px;
    color: #443635;
    font-weight: 700;
    line-height: 77px;
  }

  .logo3_class{
    width: 65px;
    position: absolute;
    top: 9px;
    left: 15px;
  }

  .right_muen{
    float: right;
    margin-right: 15px;
  }

  .ivu-menu-dark.ivu-menu-horizontal .ivu-menu-submenu {
    color: #333333;
  }

  .ivu-layout {
    display: flex;
    flex-direction: column;
    flex: auto;
    background: #ffffff;
  }


  .ivu-spin-fix {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,.9);
  }





  .account-info .wrapper-content {
    background: #f1f1f1;
    padding: 80px 200px 60px 200px;
  }
  .account-info .layout-content {
    padding: 40px 20px;
  }
  .account-info .manage-contents {
    padding-left: 32px;
    padding-right: 32px;
  }
  .account-info .manage-contents h4 {
    display: block;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 12px;
  }
  .user-contents {
    clear: both;
    display: block;
    border-bottom: 1px solid #e5e5e5;
    padding: 22px 0;
    font-size: 12px;
  }
  .user-contents:last-child {
    border: none;
  }
  .user-contents ul li {
    list-style: none;
    clear: both;
    display: block;
    zoom: 1;
    padding: 6px 0;
    position: relative;
  }
  .user-contents ul li strong {
    font-weight: 400;
    padding-left: 30px;
  }
  .user-contents .content-item {
    display: inline-block;
    padding-right: 15px;
  }
  .user-contents .content-title {
    line-height: 2.5;
  }
  .user-contents .content-img {
    width: 105px;
    border-radius: 100px;
  }
  .user-contents .input-message {
    width: 250px;
  }


  .ivu-menu-horizontal .ivu-menu-submenu {
    float: left;
    padding: 0 10px;
    position: relative;
    cursor: pointer;
    z-index: 3;
    transition: all .2s ease-in-out;
  }

  .qp_img{
    position: absolute;
    z-index: 9;
    top: 105px;
    right: 64px;
  }


</style>
